<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
    <link rel="icon" th:href="@{/favicon.png}" type="image/png"/>
    <script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <link rel="stylesheet" th:href="@{/css/Home.css}">
</head>
<body>
<div id="app">
    <!-- 新增加载动画 -->
    <div class="loader">
        <div class="loader-circle"></div>
    </div>

    <!-- 头部 - 登录状态区域 -->
    <header>
        <div v-if="!isLoggedIn" class="auth-buttons">
            <button class="btn" @click="goToLogin">登录</button>
            <button class="btn" @click="goToRegister">注册</button>
        </div>
        <div v-else class="user-info">
            <img v-bind:src="headshotURL" alt="头像" class="avatar" @click="goToUserProfile" title="点击进入用户管理">
            <span>{{ username }}</span>
            <button class="btn" @click="logout">登出</button>
        </div>
    </header>

    <!-- 主内容区域 -->
    <main>
        <!-- 游戏标题SVG -->
        <div class="game-title">
            <svg class="game-title" viewBox="0 0 600 200" xmlns="http://www.w3.org/2000/svg">
                <!-- 游戏标题文字 -->
                <text x="300" y="180" text-anchor="middle" font-size="64" font-weight="700" fill="#ffffff" font-family="Arial, sans-serif">
                    My Server
                </text>
            </svg>
        </div>

        <!-- 操作按钮 -->
        <div class="action-buttons">
            <button class="btn" @click="startGame">开始游戏</button>
            <button class="btn" @click="viewLeaderboard">排行榜</button>
            <button class="btn" @click="viewAbout">关于本项目</button>
        </div>
    </main>

    <!-- 页脚 - 版权声明 -->
    <footer>
        <p>Copyright &copy; 2025 Wooming Games. 版权所有。</p>
    </footer>
</div>
<script type="module">
    const { createApp } = Vue
    // 创建Vue实例
    createApp({
        data() {
            return {
                isLoggedIn: false, // 登录状态
                username: '',      // 用户名
                headshotURL: '',   // 用户头像url
                jwtToken: null     // JWT令牌
            }
        },
        created() {
            // 页面加载时检查本地存储中的JWT
            this.checkLoginStatus();
        },
        methods: {
            // 检查登录状态
            checkLoginStatus() {
                // 从本地存储获取JWT
                const jwt = localStorage.getItem('jwt');
                // console.log(jwt)

                if (jwt) {
                    // 如果有JWT，发送验证请求
                    this.verifyToken(jwt);
                } else {
                    // 没有JWT，保持未登录状态
                    this.isLoggedIn = false;
                }
            },

            // 验证JWT令牌
            verifyToken(token) {
                // 使用Axios发送验证请求
                axios.post('/api/public/verify', { token })
                    .then(response => {
                        if (response.data.code === 200) {
                            // 令牌有效，更新用户信息
                            this.isLoggedIn = true;
                            this.username = response.data.data.username;
                            localStorage.setItem('username', response.data.data.username)
                            this.getInitials();
                            this.jwtToken = token;
                        } else {
                            console.log(response.data)
                            // 令牌无效，清除本地存储
                            localStorage.removeItem('jwt');
                            this.isLoggedIn = false;
                        }
                    })
                    .catch(error => {
                        console.error('令牌验证失败:', error);
                        localStorage.removeItem('jwt');
                        this.isLoggedIn = false;
                    });
            },

            // 获取用户名称缩写（用于头像）
            getInitials() {
                axios.get('/api/headshot',{
                    headers: {
                        'Content-Type': 'application/json',
                        'Authorization': 'Bearer ' + localStorage.getItem('jwt')
                    },
                    responseType: 'blob'
                }).then((r) => {
                    this.headshotURL = URL.createObjectURL(r.data)
                })
            },

            // 导航到登录页面
            goToLogin() {
                localStorage.setItem('userInit', 'login')
                // 实际项目中替换为登录页面路径
                window.location.href = '/user';
            },

            // 导航到注册页面
            goToRegister() {
                localStorage.setItem('userInit', 'register')
                // 实际项目中替换为注册页面路径
                window.location.href = '/user';
            },

            // 开始游戏
            startGame() {
                if (this.isLoggedIn) {
                    // 已登录，跳转到游戏页面
                    window.location.href = '/game';
                } else {
                    // 未登录，跳转到登录页面
                    this.goToLogin();
                }
            },

            // 查看排行榜
            viewLeaderboard() {
                window.location.href = '/rank';
            },

            // 查看关于页面
            viewAbout() {
                window.location.href = '/about';
            },

            // 用户管理界面
            goToUserProfile() {
                window.location.href = '/userProfile';
            },

            // 用户登出
            logout() {
                // 清除本地存储中的JWT
                localStorage.removeItem('jwt');
                // 重置用户状态
                this.isLoggedIn = false;
                this.username = '';
                this.headshotURL = '';
                this.jwtToken = null;
            }
        }
    }).mount('#app')

    // 页面加载完成后移除加载动画
    window.addEventListener('load', function() {
        setTimeout(function() {
            document.querySelector('.loader').style.display = 'none';
        }, 500);
    });
</script>
</body>
</html>